<template>
  <page-lr class="page-pollution-situation">
      <div class="list" slot="content-left">
        <el-image 
          :style="{width: 'auto', height:domHeight+'px'}"
          :src="searchForm.img" 
          :z-index="3000"
          :lazy="true"
          :preview-src-list="picList">
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
      </div>
        <el-form size="small" :model="searchForm" label-width="90px" slot="content-right">  
          <div ref="content">      
          <el-form-item label="选择日期：">
            <el-date-picker v-model="searchForm.date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerDate" @change="getList" style="width:100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="实况类型：">
            <el-button v-for="(item,index) in initData.type1" :key="index" size="small" :type="searchForm.type1 == item.value ? 'primary' : 'default'" @click="changeType(item.value,1)">
              {{ item.label }}
            </el-button>
          </el-form-item>
          <el-form-item label="选择类型：">
            <el-button v-for="(item,index) in initData.type2" :key="index" size="small" :type="searchForm.type2 == item.value ? 'primary' : 'default'" @click="changeType(item.value,2)">
              {{ item.label }}
            </el-button>
          </el-form-item>
          <el-form-item label="选择层次：" v-if="initData.type3.length > 0">
            <el-button v-for="(item,index) in initData.type3" :key="index" size="small" :type="searchForm.type3 == item.value ? 'primary' : 'default'" @click="changeType(item.value,3)">
              {{ item.label }}
            </el-button>
          </el-form-item>
        </div>
          <el-form-item label="选择时间：" class="list-time">
            <div :style="{height: timeHeight + 'px', overflow:'hidden'}">
           <el-scrollbar style="height:100%">
            <el-button v-for="(item,index) in initData.times" :key="index" size="small" :type="searchForm.img == item.url ? 'primary' : 'default'" @click="searchForm.img = item.url">
              {{ item.date + ' ' + item.time}}
            </el-button>
            </el-scrollbar>
          </div>
          </el-form-item>
        </el-form>    
  </page-lr>
</template>
<script>
import types from './config';
export default {
  data() {
    return {
      loading: true,
      searchForm:{
        date: null,
        type1: null,
        type2: null,
        type3: null,
        img: null,
      },
      pickerDate:{
        disabledDate:(time) => {
          const current = new Date().getTime();
          const start = new Date('2022-01-01').getTime();
          return time.getTime() > current || time.getTime() < start;
        }
      },
      initData:{
        type1: types,
        type2: [],
        type3: [],
        times: [],
      },
      domHeight: '',
      contentHeight: null,
      timeHeight: null,
      list: [],
      picList: [],
    }
  },
  created() {
    this.domHeight = document.body.clientHeight - 64 - 40 - 48*2 - 20;
    this.searchForm.date = this.$moment().format('YYYY-MM-DD');
    this.changeType('天气图',1);
  },
  methods: {
    getList(){
      let arr = this.searchForm.date.split('-');
      let params = {
        dt_day: arr[2],
        dt_month: arr[1],
        dt_year: arr[0],
        type: this.searchForm.type1
      };
      this.$request('post', '/models/images', params, (data,msg) => {
        // this.list = data;
        this.list = data.map(item => {
          let name = item.name.split('.')[0];
          let arr = name.split('_');
          let len = arr.length;
          if(this.searchForm.type1 != '雷达图' && this.searchForm.type1 != '卫星云图'){
            item.date = arr[len-2].substring(0,4)+'-'+arr[len-2].substring(4,6)+'-'+arr[len-2].substring(6);
            item.time = arr[len-1] + ':00';
            item.dateTime = Number(arr[len-2]+arr[len-1]);
          }else{
            let str = arr[len - 1];
            item.dateTime = Number(str);
            item.date = str.substring(0,4)+'-'+str.substring(4,6)+'-'+str.substring(6,8);
            item.time = str.substring(8,10) + ':' + str.substring(10);

          }
          return item;
        });
        this.getTimeList();
      });
    },
    getTimeList(){
      let arr = [];
      if(this.searchForm.type2 && this.searchForm.type2 != '雷达图' && this.searchForm.type2 != '卫星云图'){
        arr.push(this.searchForm.type2)
      }
      if(this.searchForm.type3){
        arr.push(this.searchForm.type3)
      }
      let str = arr.join('_');
      let times = this.list.filter(item => {
        return item.name.indexOf(str) == 0;
      });
      times.sort((a,b) => {
        return b.dateTime - a.dateTime;
      })
      this.initData.times = times;
      this.picList = times.map(item => item.url);
      this.searchForm.img = this.picList[0];
      //计算选择时间的dom高度
      this.contentHeight = this.$refs.content.offsetHeight;
      this.timeHeight = this.domHeight - this.contentHeight - 30;
    },
    changeType(value, index){
      this.searchForm['type'+index] = value;
      if(index == 1){
        this.getTypesList(value,1);
        this.getTypesList(this.searchForm.type2,2);
        this.getList();
      }else if(index == 2){
        this.getTypesList(value,2);
        this.getTimeList();
      }else{
        this.getTimeList();
      }
    },
    getTypesList(value,index){
      let obj = this.initData['type'+ index].find(item => item.value == value);
      if(obj.children && obj.children.length > 0){
        this.initData['type'+(index+1)] = obj.children;
        this.searchForm['type'+(index+1)] = this.initData['type'+(index+1)][0].value;
      }else{
        this.initData['type'+(index+1)] = [];
        this.searchForm['type'+(index+1)] = null;
      }
    }
  }
}
</script>